<template>
    <div class="article">
        <div class="list"
            v-infinite-scroll="getArticleData" 
            :infinite-scroll-disabled="disabled"
        >
            <div 
                class="list-item" 
                v-for="(item,index) in list" 
                :key="index"
            >
                <div class="title">{{item.articleName}}</div>
                <div class="content">{{ item.content }}</div>
                <div class="footer">
                    <div>{{item.auth}} {{item.email}}</div>
                    <div>{{item.date}}</div>
                </div>
            </div>
            <div v-if="loading">加载中。。。</div>
            <div v-if="noMore">没有更多</div>
        </div> 
        <el-backtop target=".article .list" :bottom="100" :right="60"></el-backtop>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                page:1,
                loading:false,
                noMore:false,
            }
        },
        computed: {
            disabled() {
                return this.loading ||  this.noMore
            }
        },
        created () {
            //this.getArticleData();
            
        },
        methods: {
            getArticleData() {
                this.loading = true
                this.$api.artList({page:this.page}).then(res=>{
                    setTimeout(()=>{
                        let data = res.data
                        if(data.length){
                            this.list = this.list.concat(data)
                            this.page++
                            this.loading = false
                        }else{
                            this.loading = false
                            this.noMore = true
                        }
                    },1000)
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    .article{
        padding: 15px;
        .list{
            overflow: auto;
            height: 800px;
            .list-item{
                margin-bottom: 15px;
                .title{
                    font-weight: 700;
                    font-size: 18px;
                    line-height: 40px;
                    color: #222;
                }
                .content{
                    font-size: 15px;
                    line-height: 30px;
                }
                .footer{
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #666;
                    div{
                        margin-right: 10px;
                    }
                }
            }
        }
    }
</style>